<template>
    <div class="main">
       <!-- <c-head :title="currentCateName" :cid="currentCid"></c-head>-->
                <div class="goodslist" >
                  <p class="title">{{$t('shop.menu.category')}}</p>
                    <div class="goods">
                        <goods-list-item class="good-item"
                                v-for="item in showGoods" :key="item.id" :product="item"
                        ></goods-list-item>
                    </div>

                </div>
                <FootB></FootB>
            </div>

</template>

<script>
    import FootB from "components/content/footer/Foot.vue";
 //   import CHead from "components/common/chead/chead";
    import GoodsListItem from "components/content/goods/GoodsListItem";
     import data from 'network/goods_data.js'
   // import i18n from '@/i18n';

    export default {
        name: "CategoryList",
        components: {
        //    CHead,
            FootB,
            GoodsListItem,
        },
        data() {
            return {
                activeKey:0,
                categories:[],
                loadshow:true,
                goods:{
                    sales:{page:0, list:[]},
                    price:{page:0, list:[]},
                    comments_count:{page:0, list:[]},
                },
                currentOrder:'sales',
                currentCid:0,
                currentCateName:'',
                page:0,
                bscroll:null,
                isShowBackTop:false,

            }
        },
        computed: {
            showGoods() {
                return  this.goods[this.currentOrder].list;
            },


        },
        mounted() {
            this.currentCid = this.$route.query.cid;
            this.currentCateName =  this.$route.query.name;


             this.getCategoryGoods();



        },


        methods:{
            itemClick(id){
                this.$router.push({path:'/detail', query:{id}});
            },

            getCategoryGoods(){
                const zdata = data[this.$i18n.locale].map(item=>{
                  //  item.title = JSON.parse(item.title)[i18n.locale] ?? JSON.parse(item.title).zh
                 //   item.description = JSON.parse(item.description)[i18n.locale] ?? JSON.parse(item.description).zh
                    item.cover_url=require("@/assets/dimgs/" + item.cover.split("#")[0]);
                    return item;
                });
                this.goods[this.currentOrder].list.push(...zdata);
            },


        }
    }
</script>
<style scoped lang="less">
.title{
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 693;
  font-size: 25px;
  line-height: 24px;
  /* identical to box height, or 128% */
  text-align: center;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #D57123 0%, #F4BF43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
    .goods {
        display: flex;
        width: 96%;
        height: auto;
        min-height: 100vh;
        border-radius: 4px;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin:20px auto;

    }
    .wrapper {
        position: absolute;
        top:60px;
        bottom: 0px;
        left:0px;
        right:0px;
        overflow: hidden;
        .content {

        }
    }
    .good-item{
      border-radius: 10px;
      border:1px solid white;
    }
    .goodslist{
        max-width: 550px;
        margin: 0 auto;
        font-size: 12px;
        border-top: #161616 solid 2px;
        background:#000;

    }

</style>
<style scoped>

    .van-card {
        border-radius: 4px;
        background-color: #181818;
        color:#FEFEFE;
        margin-left:15px;

    }

    .van-card__desc {
        color: #DEDEDE;
        font-size:12px;

    }

    .van-card__price {

        color: #DBDBDD;

    }

    .van-card__num {
        color: #BABABA;
    }

    .van-sidebar-item--select, .van-sidebar-item--select:active {
        background-color: #1F1B19 !important;
        width:82px !important;
    }

    .van-sidebar-item--select {
        color: #EFEFEF;
    }

    .van-sidebar-item--select::before {

        background-color: #FB6300;

    }

    .van-sidebar-item {

        color: #EFEFEF;
        background-color: #000000;
    }

    .van-sidebar {
        overflow-y: unset;

    }


</style>

<style scoped lang="less">
    .thumb {
        width:85px;
        img {
            width:85px;
            height:85px;
        }
    }
    .desc {
        color:#B3B3B3;
        font-size:12px;
        word-break: break-all;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .main {
        max-width: 550px;
        margin:auto;
        width:100%;
        background:#000;
    }

    .mainbox{
        background:#1F1B19;
        width:100%;
        display: flex;


        .menubar {
            width:80px;
            height:100vh;
            background:#000;
            position:fixed;
            top:60px;
            left:0px;
            z-index: 10;
        }

        .menu {
            flex-basis: 80px;
            width:80px;
            background:#1F1B19;
            position: sticky;
            top:0px;
        }





        .goodslist {
            flex-grow: 1;
            background:#1F1B19;
            padding:15px 15px 15px 0 !important;
            flex:1;
            width:100%;
            height:auto;
            text-align: left !important;
            .content {
                padding-top: 0px;
                position: relative;
                top:0px;
                left:0px;
                right:0;
                background-color: #1F1B19 !important;
            }
        }
    }
</style>
